<template>
	<div>
		<Navigation title="国家/地区编码" nav_class="nav_style border_bottom">
		</Navigation>
		<van-search
			placeholder="请输入并且搜索"
			:clearable="false"
			v-model.trim="value"
		/>
		<div
			class="numrow notranslate"
			v-for="(item2, index) in list"
			:key="index"
			@click="
				selectnum(item2.id, item2.name, item2.area_code, item2.country_code)
			"
		>
			<span>{{ item2.name }}</span>
			<span class="fr">+{{ item2.id }}</span>
		</div>
	</div>
</template>

<script>
import Navigation from "@/components/Navigation.vue";
// E:\zpdemo\public_wx\buildmostwx2\src\store\index.js
import { mapActions } from "vuex";

import Fuse from 'fuse.js'
import eventBus from '@/plugins/eventBus'
export default {
	data() {
		return {
			letter: [
				"A",
				"B",
				"C",
				"D",
				"E",
				"F",
				"G",
				"H",
				"I",
				"J",
				"K",
				"L",
				"M",
				"N",
				"O",
				"P",
				"Q",
				"R",
				"S",
				"T",
				"U",
				"V",
				"W",
				"X",
				"Y",
				"Z",
			],
			// indexList: District,
			indexList2: [], //本地json改为线上请求
			value: "",
			t: null,
		};
	},

	components: {
		Navigation,
	},

	computed: {
		list: function () {
			var arrByZM = [];
			console.log('list---',this.value);
			if (this.value) {
				arrByZM = this.localFilterData(this.value)
				return arrByZM;
			} else {
				console.log('aa',this.indexList);
				return this.indexList;
			}
		},
	},

	mounted() {
		const { t } = this.$route.query;
		if (t) {
			this.t = t;
		}
		// cccc
		this.intaData()
	},

	methods: {
		...mapActions('LoginModule',[
			'getCountryList'
		]),
		intaData(){
			this.indexList=this.getCountryList()
			console.log('gg',this.getCountryList());
			console.log('bb',this.indexList);
		},
		selectnum(id, name, area, country) {
			console.log("id", id);
			if (this.$route.query.from == "basic") {
				localStorage.setItem("telephone", id);
				localStorage.setItem("teleName", name);
				localStorage.setItem("teleCountry", country);
				this.$router.push({
					path: "basic_information",
					query: {
						t: this.t,
					},
				});
			} else if (this.$route.query.from == "basic2") {
				// 独立设计师
				localStorage.setItem("telephone", id);
				this.$router.push({
					path: "basic_information_Independent",
					query: {
						t: this.t,
					},
				});
			} else if (this.$route.query.from == "fax") {
				localStorage.setItem("faxCode", id);
				this.$router.push({
					path: "basic_information",
					query: {
						t: this.t,
					},
				});
			} else if (this.$route.query.from == "fax2") {
				//  独立设计师
				localStorage.setItem("faxCode", id);
				this.$router.push({
					path: "basic_information_Independent",
					query: {
						t: this.t,
					},
				});
			} else if (this.$route.query.from == "login") {
				localStorage.setItem("loginCode", id);
				eventBus.$emit('onSelectCountryCode', {
					code: id,
					country: name,
					areacode: area,
					countrycode: country,
					tabNum: 1,
					t: this.t,
				})
				this.$router.go(-1)
			} else if (this.$route.query.from == "add_company_contact") {
				let p = {
					code: id,
					country: name,
					country_code: country
				};
				localStorage.setItem("cantor", JSON.stringify(p));
				this.$router.go(-1);
			} else if (this.$route.query.from == "designType") {
				// 需求855
				localStorage.setItem("telephone_type", id);
				localStorage.setItem("telCountry_type", country);
				localStorage.setItem("telName_type", name);
				this.$router.go(-1);
			} else if (this.$route.query.from == "release") {
				// 需求994
				localStorage.setItem("telephone", id);
				this.$router.go(-1);
			} else if (this.$route.query.from == '/add_branches') {
				eventBus.$emit('onSelectCountryCode',{
					code:id,
					country:name,
					areacode:area,
					countrycode: country,
				})
				this.$router.go(-1)

			} else {
				if(this.$route.query.register){
          this.$router.push({
            path: "register_inquiry",
            query: {
              phoneCode: id,
              country: name,
              areacode: area,
              countrycode: country,
              t: this.t,
              linkId:this.$route.query.linkId
            },
          });
        }else{
          this.$router.push({
            path: "registration_buys",
            query: {
              phoneCode: id,
              country: name,
              areacode: area,
              countrycode: country,
              t: this.t,
            },
          });
        }
			}
		},

		localFilterData(searchText) {
			const options = {
				threshold: 0.0,
				keys: ['id', 'name']
			}
			const fuse = new Fuse(this.indexList, options);
			const searchLists = fuse.search(searchText)
			let newLists = []
			for (const items of searchLists) {
				newLists.push(items.item)
			}
			console.log(newLists)
			return newLists
		},
	},
};
</script>
<style lang='less' scoped>
.numrow {
	padding: 0.2rem 0.5rem 0.2rem 0.3rem;
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
}
/deep/ .van-index-bar__index--active {
	color: #0099ff !important;
}
/deep/ .van-field__control {
	margin-top: 0.06rem;
}
/deep/.border_bottom{
	border-bottom: 1px solid #e6e6e6;
}
</style>
